<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>X+培训机构约课系统 - 登录</title>
    <meta name="keywords" content="X+约课平台,在线约课,后台手动约课,课程管理,老师管理,排课计划,群发短信">
    <meta name="description"
          content="X+乐约课是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" th:href="@{/static/ico/favicon.ico}" href="../static/favicon.ico">
    <link href="../static/css/bootstrap.min.css?v=3.3.6" th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet">
    <link href="../static/css/font-awesome.css?v=4.4.0" th:href="@{/static/css/font-awesome.css(v='4.4.0')}"
          rel="stylesheet">

    <link href="../static/css/animate.css" th:href="@{/static/css/animate.css}" rel="stylesheet">
    <link href="../static/css/style.css?v=4.1.0" th:href="@{/static/css/style.css(v='4.1.0')}" rel="stylesheet">

    <link href="../static/css/login.css" th:href="@{/static/css/login.css}" rel="stylesheet">

    <!-- Sweet Alert -->
    <link href="../../static/css/plugins/sweetalert/sweetalert.css"
          th:href="@{/static/css/plugins/sweetalert/sweetalert.css}" rel="stylesheet">
    <!-- Sweet alert -->
    <script src="../../static/js/plugins/sweetalert/sweetalert.min.js"
            th:src="@{/static/js/plugins/sweetalert/sweetalert.min.js}"></script>


    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->
    <script>if (window.top !== window.self) {
        window.top.location = window.location;
    }</script>
</head>

<body class="gray-bg signin">

<div class="middle-box text-center loginscreen  animated fadeInDown">
    <div>
        <div>
            <h1 class="logo-name" style="font-size: 36px;letter-spacing: 1px;">乐约课系统</h1>
        </div>
        <h3>欢迎使用 X+乐约课平台</h3>
        <form class="m-t form-horizontal" role="form" th:action="@{/user/login}" method="post">
            <div class="form-group" style="display: flex; align-items: center;">
                <span th:if="${USER_OR_PWD_NOT_EXIST}" class="text-danger">用户名或密码不正确</span>
                <span th:if="${CODE_ERROR}" class="text-danger">验证码错误</span>
            </div>
            <div class="form-group" style="display: flex; align-items: center;">
                <input type="text" class="form-control" name="username" value="张老师" placeholder="用户名"
                       required="true" style=" height: 40px; color:black">
            </div>
            <div class="form-group" style="display: flex; align-items: center;">
                <input type="password" class="form-control" name="password" value="567" placeholder="密码"
                       required="true" style=" height: 40px; color:black">
            </div>
            <div class="form-group" style="display: flex; align-items: center;">
                <input id="captchaText" type="text" class="form-control" name="code" th:value="${code}"
                       placeholder="请输入验证码" required="true"
                       style="width:200px; height: 40px; color:black" maxlength="6">

                <img id="captchaImg" th:src="'data:image/jpeg;base64,' + ${captchaImage}" alt="Mountains"
                     style="margin-left: 30px;width:100px;height:40px;">
            </div>

            <div class="form-group" style="display: flex; align-items: center;">
                <button type="submit" class="btn btn-primary block full-width m-b">登 录</button>
            </div>
            <div class="form-group" style="display: flex; justify-content: space-between; align-items: center;">
                <a href="x_ensure_user.html" th:href="@{/user/toEnsureUser}" style="margin-right: auto;">忘记密码了？</a>
                <a href="x_register.html" th:href="@{/index/toRegister}" style="margin-left: auto;">注册一个新账号</a>
            </div>

        </form>
    </div>
</div>

<!-- 全局js -->
<script src="../static/js/jquery.min.js?v=2.1.4" th:src="@{/static/js/jquery.min.js(v='2.1.4')}"></script>
<script src="../static/js/bootstrap.min.js?v=3.3.6" th:src="@{/static/js/bootstrap.min.js(v='3.3.6')}"></script>

</body>

<script>
    // 获取验证码显示的元素
    var captchaImg = document.getElementById("captchaImg");
    var captchaText = document.getElementById("captchaText");

    // 添加点击事件监听器
    captchaImg.addEventListener('click', function () {

        // 发送请求获取验证码
        $.ajax({
            url: '[[${#request.getContextPath()}]]/user/getCaptcha',
            type: 'GET',
            success: function (data) {
                console.log('data: ', data);
                swal({
                    title: "已请求验证码",
                    type: "success",
                    text: data.captchaText,
                    timer: 800,
                    showConfirmButton: false
                });
                // 将验证码显示在页面上
                captchaImg.src = "data:image/png;base64," + data.captchaImageBytes;
                captchaText.value = data.captchaText;
                //$('#captchaText').val(data.captchaText)
            },
            error: function () {
                swal("请求失败", "请检查网络连接", "error");
            }
        });
    });

    // 添加键盘事件监听器
    // document.addEventListener('keydown', function (event) {
    //     if (event.key === 'Enter') {
    //         event.preventDefault();
    //     }
    // });
</script>
</html>
